<div class="modal-content" data-test-modal="re-verify">
    <form id="verify" class="gh-signin" method="post" novalidate="novalidate" {{on "submit" (perform this.verifyTokenTask)}}>
        <header>
            <h1>Verify it's really you</h1>
            <p>
                We don't recognize this device.
                To keep your account safe, we've sent a 6-digit verification code to your email to make sure it's you.
            </p>
        </header>

        <div class="form-group">
            <GhFormGroup @errors={{this.verifyData.errors}} @hasValidated={{this.verifyData.hasValidated}} @property="token">
                <label for="token">Verification code</label>
                <span class="gh-input-icon forgotten-wrap">
                    <input
                        id="token"
                        name="token"
                        type="text"
                        inputmode="numeric"
                        pattern="[0-9]*"
                        placeholder="123456"
                        autocomplete="one-time-code"
                        class="gh-input"
                        value={{this.token}}
                        data-test-input="token"
                        {{on "input" this.handleTokenInput}}
                    />

                    <GhTaskButton
                        @task={{this.resendTokenTask}}
                        @class="forgotten-link gh-btn gh-btn-link gh-btn-icon"
                        @type="button"
                        @successClass=""
                        @failureClass=""
                        @disabled={{or this.resendTokenTask.isRunning this.delayResendAvailabilityTask.isRunning}}
                        data-test-button="resend-token"
                        as |task|
                    >
                        {{#if this.delayResendAvailabilityTask.isRunning}}
                            <span>Sent</span>
                        {{else}}
                            <span>{{#if task.isRunning}}{{svg-jar "spinner" class="gh-spinner"}}&nbsp;Sending{{else}}Resend{{/if}}</span>
                        {{/if}}
                    </GhTaskButton>
                </span>
            </GhFormGroup>
        </div>

        <GhTaskButton
            @buttonText="Verify &rarr;"
            @task={{this.verifyTokenTask}}
            @showSuccess={{false}}
            @class="login gh-btn gh-btn-login gh-btn-block gh-btn-icon"
            @type="submit"
            @useAccentColor={{true}}
            data-test-button="verify"
        />
        <p class="main-notification">Not receiving the emails? <a href="https://ghost.org/docs/config/#mail" target="_blank" rel="noopener noreferrer">Learn more</a></p>

        {{#if (or this.flowErrors this.verifyData.validationMessage)}}
            <p class="response" data-test-error="verify">{{or this.flowErrors this.verifyData.validationMessage}}</p>
        {{/if}}
    </form>
</div>
